<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>五环</title>
</head>
<style>
    * {
        margin: 0px;
        border: 0px;
    }

    div div {
        position: absolute;
        width: 100px;
        height: 100px;
        border: 10px solid black;
        border-radius: 50%;
    }

    .circle1 {
        border-color: red;
    }

    .circle2 {
        left: 120px;
        border-color: blue;
    }

    .circle3 {
        left: 240px;

    }

    .circle4 {
        left: 60px;
        top: 80px;
        border-color: yellow;
    }

    .circle5 {
        left: 180px;
        top: 80px;
        border-color: orange;
    }

    .warp {
        position: absolute;
        width: 360px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-left: -180px;
        margin-top: -100px;
        background-color: pink;
    }
</style>

<body>
    <div class="warp">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
        <div class="circle5"></div>
    </div>
</body>

</html>